<template>
    <div class="cpc-drawer-box">
        <div v-if="isShowMask" class="mask" @click.stop="handlerMaskClick"></div>
        <div id="cpcDrawerContainer" class="container" :style="styles">
            <div v-if="title" class="title-box">
                <span class="title">{{ title }}</span>
                <n-icon v-if="isShowCloseIcon" class="close" size="20" @click.stop="closeHandler">
                    <CloseOutlined></CloseOutlined>
                </n-icon>
            </div>
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { CloseOutlined } from "@vicons/antd";
import { CpcDrawerCtrl } from "./CpcDrawerCtrl";

export default {
    components: { CloseOutlined },
    props: ["id", "componentName", "title", "data", "_callBack", "isShowCloseIcon", "isShowMask", "isMaskEvent", "styles", "zIndex", "close"],
    data() {
        return {};
    },
    methods: {
        handlerMaskClick() {
            if (this.isMaskEvent) {
                this.closeHandler();
            }
        },
        closeHandler() {
            this.close();
        },
    },
};
</script>

<style lang="scss" scoped>
.cpc-drawer-box {
    position: fixed;
    top: 0;
    left: 0;
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .container {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: #fff;
        color: #000;
        .title-box {
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            .title {
                font-size: 20px;
                margin-left: 20px;
            }
            .close {
                position: relative;
                top: 10px;
                right: 20px;
                cursor: pointer;
                &:hover {
                    color: #0e7a0d;
                }
            }
        }
    }
}
</style>
